<template>
  <f-page-layout title="FormLayout" titlebar="配置表单，编辑表格，列表表单" :actions="actions">
    <f-form-layout
      @ValidateFailed="onValidateFailed"
      class="mb20"
      ref="form"
      :showError="showError"
      responsive
      :collapsed="false"
      :disabled="false"
      :layout="layout"
      :model="model"
      :columns="columns"
      @submit="submit">
    </f-form-layout>
  </f-page-layout>
</template>

<script setup lang="ts">
import { Tag } from 'ant-design-vue';
import { h, watch, ref } from 'vue';
const outside = ref(1);
const layout = ref('vertical');
const showError = ref(true);
const actions = ref([
  {
    label: 'Submit',
    type: 'primary',
    click: () => {
      form.value.validate().then(() => {
        console.log('submit');
      });
    }
  },
  { label: 'Horizontal', type: 'primary', click: () => (layout.value = 'horizontal') },
  { label: 'Vertical', click: () => (layout.value = 'vertical') },
  { label: 'Show Error', click: () => (showError.value = !showError.value) }
]);
const form = ref();
const label = ref(1);
const model = ref({
  name: '呵呵',
  ok3: 'hdkfsdhjfsfsf',
  ok4: 'dfasdfsdfsdf',
  aa: '2022-01-01',
  cc: ['2022-01-01', '2022-02-02'],
  x14: ['1', '2'],
  text: '都发了科技萨拉丁咖啡机手打拉法基拉萨的飞机萨拉',
  list1: [{}, {}]
});
const columns = ref([
  {
    title: '分组-嵌套分组',
    span: 24,
    label: '分组-嵌套',
    columns: [
      {
        span: 20,
        flex: 1,
        label: 'xxxx',
        columns: [
          {
            required: true,
            label: '分组',
            field: 'aa',
            type: 'date',
            props: {
              format: 'YYYY-MM-DD',
              valueFormat: 'YYYY-MM-DD'
            }
          },
          {
            required: true,
            label: '分组',
            field: 'x12',
            type: 'select',
            props: {
              options: [{ label: '文本显示快递费就撒离开防静电', value: '1' }]
            }
          },
          { required: true, label: '分组', field: 'cc', type: 'date-range' },
          {
            required: true,
            label: '分组',
            field: 'x14',
            type: 'select',
            props: {
              mode: 'tags',
              options: [
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' }
              ]
            }
          },
          { required: true, label: '分组', field: 'x15' },
          { required: true, label: '分组', field: 'x16' },
          { required: true, label: '分组', field: 'x17' },
          { required: true, label: '分组', field: 'x18' },
          { required: true, label: '分组', field: 'x19' },
          { required: true, label: '分组', field: 'x10' },
          { required: true, label: '分组', field: 'x01' }
        ]
      },
      {
        span: 4,
        flex: '200px',
        label: 'xxxgvf',
        columns: [
          {
            label: '分组',
            field: 'x11',
            type: 'img-upload'
          }
        ]
      }
    ]
  },
  {
    label: 'Group',
    span: 24,
    columns: [
      { label: 'name1', field: 'n1' },
      { label: 'name1', field: 'n1' },
      { label: 'name1', field: 'n1' },
      { editType: 'input-textArea', span: 24, label: 'name1', field: 'n1' },
      { editType: 'input-textArea', span: 24, label: 'name1', field: 'n1' },
      { editType: 'input-textArea', span: 24, label: 'name1', field: 'n1' }
    ]
  },
  {
    label: 'list-group',
    span: 24,
    columns: [
      {
        type: 'form-edit-list',
        field: 'edit-list',
        span: 24,
        props: {
          layout: layout,
          columns: [
            { label: '字段1', field: 'xx-11' },
            { label: '字段1', field: 'xx-12' },
            { label: '字段1', field: 'xx-13' },
            { label: '字段1', field: 'xx-14' }
          ]
        }
      }
    ]
  },

  {
    type: 'form-edit-table',
    field: 'list1',
    span: 24,
    props: {
      title: '表单分组1',
      collapsed: true, // 折叠按钮
      validateOnHide: true, // 隐藏行编辑时校验
      validateOnAdd: false, // 添加新数据前校验
      useRemove: true, // 使用删除按钮和批量删除
      useInsert: true, // 使用添加和删除图标
      useBatchRemove: 'ON', // 保留批量删除按钮
      editMode: 'row', // row cell multiple
      editRowTrigger: 'click-cell', // click-button
      disabled: true,
      columns: [
        { title: '表1', field: 'xx1', editType: 'input' },
        { title: '表2', field: 'xx2' },
        { title: '表3', field: 'xx3' },
        { title: '表4', field: 'xx4' },
        { title: '表5', field: 'xx5' },
        { title: '表6', field: 'xx6' },
        { title: '表7', field: 'xx7' }
      ]
    }
  },
  {
    label: '富文本编辑',
    span: 24,
    /** 如果一行只有一个字段，用一个group进行包裹 ，有分组样式*/
    columns: [
      {
        span: 24,
        type: 'editor',
        field: 'text'
      }
    ]
  },

  {
    label: '行内分组',
    span: 24,
    columns: [
      { label: '字段1', field: 'a1a', type: 'input', span: 12, extra: '提示：辅助说明文案' },
      {
        label: '字段1',
        field: 'a2a',
        type: 'input',
        span: 12,
        tooltip: '问号图标形式字段说明文案'
      },
      { label: '字段1', field: 'a3a', type: 'input', span: 12 },
      {
        /*** 行内分组，实现一个表单内，多个输入项 */
        inline: true,
        span: 12,
        gutter: 1,
        columns: [
          { span: 12, label: '字段1-1', field: '1-1' },
          { span: 6, field: '1-1' },
          { span: 6, field: '1-1' }
        ]
      },
      { label: '字段2', field: 'f22' },
      { label: '字段2', field: 'f22' },
      { label: '字段2', field: 'f22' },
      { label: '字段2', field: 'f22' },
      { label: '字段2', field: 'f22' },
      { label: '字段2', field: 'f22' },
      { label: '字段2', field: 'f22' }
    ]
  },
  {
    label: '接近真实',
    span: 24,
    columns: [
      { field: 'name', label: '机构名称', required: true },
      { field: 'simpleName', label: '公司简称', required: true },
      { field: 'english', label: '英文名' },
      { field: 'uscrDP', label: '统一社会信息代码' },
      {
        field: 'dates',
        label: '起止日期',
        type: 'date-range',
        props: {
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          placeholder: ['起', '止']
        }
      },
      {
        field: 'code',
        type: 'select',
        label: '机构编码',
        props: {
          query: () => {
            console.log('outside 改变 query将自动执行一次');
            return Promise.resolve([{ label: outside.value || '无数据', value: 1 }]);
          }
        }
      },
      {
        field: 'institutionType',
        label: '机构类型',
        type: 'dictionary',
        props: { code: 'ZZJGLB' }
      },
      {
        field: 'registerType',
        label: '登记注册类型',
        type: 'dictionary',
        props: { code: 'DJZCLXDM' }
      },
      {
        field: 'industry',
        label: '经营行业',
        type: 'dictionary',
        props: { code: 'SSHYDM' }
      },
      {
        field: 'registerCapital',
        label: '注册资本（金）',
        type: 'input-number'
      },
      { field: 'businessScope', label: '经营或业务范围' },
      {
        field: 'affiliation',
        label: '隶属关系',
        type: 'dictionary',
        props: { code: 'DWLSGXDM' }
      },
      { field: 'regionalismCode', label: '行政区划', type: 'region-tree' },
      { field: 'addrRegister', label: '单位注册地址' },
      { field: 'postCodeDP', label: '邮政编码' },
      { field: 'contactTelDP', label: '联系电话' },
      { field: 'mailbox', label: '邮箱' },
      { field: 'domain', label: '网址' },
      { field: 'legalName', label: '企业法人代表' },
      {
        field: 'legalIdType',
        label: '证件类型',
        type: 'dictionary',
        props: { code: 'SFZJLBDM' }
      },
      { field: 'legalIdCard', label: '证件号' },
      {
        field: 'establishedDate',
        label: '成立日期',
        type: 'date-picker',
        props: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD' }
      },
      {
        field: 'toDate',
        label: '有效期至',
        type: 'date-picker',
        props: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD' }
      },
      { field: 'signOrg', label: '登记批准机构' },
      {
        field: 'approvalNo',
        label: '批准文号或注册号',
        extra: (data) => (data.isBranch ? 'true' : null)
      },
      {
        field: 'isBranch',
        label: '启动二级院区',
        type: 'switch',
        valueKey: 'checked'
      }
    ]
  }
]);
function onValidateFailed(e) {
  console.error('errors:', e);
}
function submit(data) {
  console.log(data);
  console.log(form.value?.getExistFieldsValue());
}
async function handleForm() {
  const value = await form.value?.validate();
  console.log(value);
}
function reset() {
  model.value = {
    isBranch: true,
    approvalNo: '23423423423',
    text: '21321'
  };
}

defineExpose({
  onTabHide: () => {
    console.log('hide');
  },
  onTabShow: () => {
    console.log('show');
  }
});
</script>
